<template>
	<view class="container">
		<view class="padding-box">
			<view class="edit-main-box">
				<view class="code-box">
					<u-icon name="grid" size="18" color="#8D8C8C"></u-icon>
				</view>
				<view class="edit-box" @click="jump('/promotionpages/user/modify')">
					<u-icon name="edit-pen" size="18" color="#8D8C8C"></u-icon>
					<view class="edit-text">编辑资料</view>
				</view>
			</view>
			<view class="content-box">
				<view class="head-main-box">
					<view class="head-img-box">
						<image v-if="info.avatar" :src="info.avatar" mode="aspectFill" class="head-img"></image>
						<image v-else src="/static/images/head.png" mode="widthFix" class="head-img"></image>
					</view>
					<view class="user-name">{{info.username || '某某某'}}</view>
				</view>
				<view class="function-main-box">
					<view class="function-title">常用功能</view>
					<view class="function-list-box">
						<view class="function-nav-box"
							@click="jump('/promotionpages/car/write_off')">
							<image src="/static/images/write_off_icon.png" mode="widthFix" class="function-nav-img"></image>
							<view class="function-nav-title">核销记录</view>
						</view>
						<!-- <view class="function-nav-box" @click="jump('/promotionpages/user/myCase')"> -->
						<view class="function-nav-box">
							<image src="/static/images/about_icon.png" mode="widthFix" class="function-nav-img"></image>
							<view class="function-nav-title">隐私政策</view>
						</view>
						
					<!-- 	<view class="function-nav-box"
							@click="jump('/promotionpages/user/expert')">
							<image src="/static/icons/mentor.png" mode="widthFix" class="function-nav-img"></image>
							<view class="function-nav-title">导师库</view>
						</view> -->
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		onShow() {
			this.hasInfo();
		},
		data() {
			return {
				capsuleHeight: 0, // 胶囊按钮顶部距离
				capsuleTop: 0, // 胶囊按钮高度
				info: {
					"username": "",
					"avatar": "",
				},
				userData: {}
			}
		},
		methods: {
			hasInfo() {
				this.$func.request('/user/info').then(res => {
					this.info = res.data.data
					this.userData = res.data.certificate
				})
			},
			jump(url) {
				uni.navigateTo({
					url: url
				})
			},
		}

	}
</script>

<style lang="scss">
	.container {
		background: #f4f8fd;
		margin-bottom: 40rpx;
		position: relative;
	}

	.logo-box {
		display: flex;
		align-items: center;
	}

	.logo {
		height: 72rpx;
	}

	.padding-box {
		padding: 20rpx;
	}

	.content-box {
		border-radius: 10rpx;
		background-color: #fff;
		padding: 20rpx 40rpx;
		margin-top: 10rpx;
	}

	.edit-main-box {
		display: flex;
		justify-content: flex-end;
	}


	.code-box {
		width: 44rpx;
		height: 44rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		background-color: rgba(233, 233, 233, .4);
		border: 2rpx solid #D8D8D8;
	}

	.edit-box {
		height: 44rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		background-color: rgba(233, 233, 233, .4);
		border: 2rpx solid #D8D8D8;
		color: #8D8C8C;
		font-size: 24rpx;
		margin-left: 20rpx;
	}

	.edit-text {
		margin: 0 10rpx;
	}

	.head-main-box {
		display: flex;
		align-items: flex-end;
	}

	.head-img-box {
		width: 140rpx;
		height: 140rpx;
		border-radius: 50%;
		overflow: hidden;
		margin-top: -70rpx;
		display: flex;
		justify-content: center;
	}

	.head-img {
		max-width: 100%;
		max-height: 100%;
		vertical-align: top;
	}

	.user-name {
		margin: 0 0 20rpx 20rpx;
		font-size: 40rpx;
		color: #161D25;
		font-weight: bold;
	}

	.school-name {
		font-size: 28rpx;
		color: #8D8C8C;
		margin: 10rpx 0 20rpx;
	}

	.join-btn-box {
		display: flex;
		margin-bottom: 70rpx;
	}

	.join-btn {
		border: 2rpx solid #D8D8D8;
		color: #8D8C8C;
		font-size: 24rpx;
		border-radius: 10rpx;
		padding: 6rpx 30rpx;
	}

	.tip-box {
		border-top: 2rpx solid #D8D8D8;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.tip-list {
		flex: 1;
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
		padding: 30rpx 0;
	}

	.tip-num {
		font-size: 48rpx;
		color: #3D3D3D;
		font-weight: bold;
	}

	.tip-text {
		font-size: 24rpx;
		color: #3D3D3D;
	}

	.declare-box {
		border-radius: 20rpx;
		background: linear-gradient(90deg, #F9E2C2, #F9DEBF);
		padding: 30rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.declare-text-box {
		flex: 1;
	}

	.declare-text {
		font-size: 40rpx;
		color: #8A6719;
		font-weight: bold;
	}

	.declare-time-box {}

	.declare-time {
		font-size: 20rpx;
		color: #70561C;
	}

	.declare-btn {
		color: #8A6719;
		background-color: #F2CB92;
		padding: 10rpx 40rpx;
		font-size: 24rpx;
		border-radius: 50rpx;
	}

	.function-main-box {
		color: #3d3d3d;
		margin-top: 100rpx;
	}

	.function-title {
		font-weight: bold;
		margin-bottom: 40rpx;
		font-size: 32rpx;
	}

	.function-list-box {}

	.function-list {
		border-bottom: dotted 2rpx #D8D8D8;
		margin-top: 30rpx 0;
		padding-bottom: 20rpx;
	}

	.join-state {
		color: #fff;
		background: #48b76e;
		font-size: 24rpx;
		border-radius: 10rpx;
		padding: 6rpx 30rpx;
	}

	.join-type-wait {
		color: #fff;
		background: #f59454;
		font-size: 24rpx;
		border-radius: 10rpx;
		padding: 6rpx 30rpx;
	}

	.join-btn-warning {
		color: #fff;
		background: #ef3131;
		font-size: 24rpx;
		border-radius: 10rpx;
		padding: 6rpx 30rpx;
	}

	.function-list-box {
		display: flex;
	}

	.function-nav-box {
		text-align: center;
		width: 25%;
	}

	.function-nav-img {
		width: 80rpx;
	}

	.function-nav-title {
		font-size: 28rpx;
		margin-top: 10rpx;
		color: #666;
	}
</style>